<script setup>
  import { ref } from 'vue'
  import { onLoad } from '@dcloudio/uni-app'
  import { http } from '@/utils/http.js'
  import { parseTime } from '@/utils/index.js'

  const orderId = ref()
  const from = ref('')
  const orderDetail = ref()
  async function getOrderDetail() {
    const res = await http.request({
      url: '/api/delivery/deliveryDetails',
      method: 'POST',
      data: {
        id: orderId.value,
      },
    })
    orderDetail.value = res.data
  }
  async function getMallOrderDetail() {
    const res = await http.request({
      url: '/api/order/orderDetails',
      method: 'POST',
      data: {
        id: orderId.value,
      },
    })
    orderDetail.value = res.data
  }

  const backpopup = ref()
  function isBackBag() {
    backpopup.value.open('center')
  }
  // 退回背包
  async function backBag() {
    let arr = []
    orderDetail.value.goods_info.forEach((item) => {
      arr.push(item.id)
    })
    const res = await http.request({
      url: '/api/delivery/backBag',
      method: 'POST',
      data: {
        id: orderDetail.value.id,
        idArr: arr,
      },
    })
    if (res.st == 1) {
      uni.reLaunch({
        url: '/pages/bag/index',
      })
    } else {
      uni.utils.toast(res.msg)
    }
  }

  //确认收货
  async function checkOwn() {
    let res = {}
    if (from.value == 'order') {
      res = await http.request({
        url: '/api/delivery/confirmOrder',
        method: 'POST',
        data: {
          id: orderDetail.value.id,
        },
      })
    } else {
      res = await http.request({
        url: '/api/order/confirmOrder',
        method: 'POST',
        data: {
          id: orderDetail.value.id,
        },
      })
    }
    if (res.st == 1) {
      uni.navigateBack({
        delta: 1,
      })
    } else {
      uni.utils.toast(res.msg)
    }
  }

  //物流
  const deliverypopup = ref()
  const deliveryGoods = ref({ goods_info: '' })
  const deliceryData = ref({ state: '', com: '', nu: '', data: [] })
  async function checkDeliver(item, type) {
    if (orderDetail.value.status != 4) {
      return
    }
    console.log(item)
    console.log(type)
    const res = await http.request({
      url: '/api/delivery/getExpress',
      method: 'POST',
      data: {
        id: item.id,
        type,
      },
    })
    deliveryGoods.value = item
    if (res.data.result == false) {
      uni.utils.toast(res.data.message)
    } else {
      let arr = []
      res.data.data.forEach((item) => {
        arr.push({
          title: item.context,
          desc: item.time,
        })
      })
      deliceryData.value = res.data
      deliceryData.value.data = arr
      deliverypopup.value.open('center')
    }
  }

  function goAsk() {
    uni.utils.toast('敬请期待')
  }

  onLoad((option) => {
    orderId.value = option.id
    from.value = option.from
    if (option.from == 'order') {
      getOrderDetail()
    } else {
      getMallOrderDetail()
    }
  })
</script>

<template>
  <view class="details-content">
    <view class="" style="padding-bottom: 100rpx">
      <view class="state-bg">
        <view class="status" v-if="orderDetail.status == 1">待付款</view>
        <view
          class="status"
          v-if="orderDetail.status == 2 || orderDetail.status == 3"
          >待发货</view
        >
        <view class="status" v-if="orderDetail.status == 4">待收货</view>
        <view class="status" v-if="orderDetail.status == 5">已完成</view>
      </view>
      <!-- //内容区 -->
      <view class="position">
        <!-- 地址 -->
        <view class="add-tag">
          <view class="Information">
            <image
              src="https://ojqn.wm2177.com/wechat_imgs/mine/address-icon.png"
              class="address-icon"
            ></image>
            <view class="name">{{ orderDetail.address_info.name }}</view>
            <view class="phone">{{ orderDetail.address_info.mobile }}</view>
          </view>
          <view class="address">{{
            orderDetail.address_info.province +
            orderDetail.address_info.city +
            orderDetail.address_info.area +
            orderDetail.address_info.address
          }}</view>
        </view>
        <!-- //列表 -->
        <view class="detail-list">
          <!-- 产品 -->
          <view
            class="details-goods"
            v-for="item in orderDetail.goods_info"
            :key="'goods' + item.id"
          >
            <image
              :src="item.goods_info.img"
              class="goods-img"
              v-if="from == 'order'"
              @click="checkDeliver(item, 1)"
            ></image>
            <image
              :src="item.img"
              class="goods-img"
              v-if="from == 'mall'"
              @click="checkDeliver(item, 2)"
            ></image>
            <view class="checkFilter" v-if="orderDetail.status == 4">
              查看物流
            </view>
            <view class="goods-name" v-if="from == 'order'">
              <text class="goods-tit">{{ item.goods_info.goods_name }}</text>
              <view class="goods-price">￥{{ item.box_price }}</view>
            </view>
            <view class="goods-name" v-if="from == 'mall'">
              <text class="goods-tit">{{ item.goods_name }}</text>
              <view class="goods-price">￥{{ item.price }}</view>
            </view>
            <view class="num">x{{ item.num }}</view>
          </view>

          <!-- 订单金额 -->
          <view class="order">
            <view class="order-tit">订单金额</view>
            <view class="order-money" v-if="from == 'order'"
              >￥{{ orderDetail.money }}</view
            >
            <view class="order-money" v-if="from == 'mall'"
              >￥{{ orderDetail.pay_sum_price }}</view
            >
          </view>
          <!-- 运费 -->
          <view class="order">
            <view class="order-tit">运费</view>
            <view class="order-money">￥{{ orderDetail.freight }}</view>
          </view>
          <!-- 实付金额 -->
          <view class="real-money">
            <view class="money" v-if="from == 'order'"
              >￥{{ orderDetail.money }}</view
            >
            <view class="money" v-if="from == 'mall'"
              >￥{{ orderDetail.pay_price }}</view
            >
            <view class="tit">实付金额</view>
          </view>
        </view>

        <!-- //订单信息 -->
        <view class="detail-list" style="padding-top: 2rpx">
          <!-- 订单编号 -->
          <view class="order">
            <view class="order-tit">订单编号</view>
            <view class="order-money">{{ orderDetail.order_sn }}</view>
          </view>
          <!-- 支付方式 -->
          <view class="order">
            <view class="order-tit">支付方式</view>
            <view class="order-money" v-if="orderDetail.pay_type == 1"
              >微信支付</view
            >
            <view class="order-money" v-if="orderDetail.pay_type == 2"
              >支付宝</view
            >
            <view class="order-money" v-if="orderDetail.pay_type == 3"
              >星石</view
            >
          </view>
          <!-- 支付方式 -->
          <view class="order">
            <view class="order-tit">下单时间</view>
            <view class="order-money">{{
              parseTime(orderDetail.add_time)
            }}</view>
          </view>
          <!-- 支付方式 -->
          <view class="order">
            <view class="order-tit">付款时间</view>
            <view class="order-money">{{
              parseTime(orderDetail.pay_time)
            }}</view>
          </view>
          <!-- 支付方式 -->
          <view class="order">
            <view class="order-tit">发货时间</view>
            <view class="order-money" v-if="orderDetail.delivery_time != 0">{{
              parseTime(orderDetail.delivery_time)
            }}</view>
          </view>
        </view>
      </view>
    </view>

    <view class="bottom-button" v-if="orderDetail.status == 1">
      <view class="button" style="margin-right: 26rpx"> 取消订单 </view>
      <!-- <view class="button"> 立即支付 </view> -->
    </view>
    <view
      class="bottom-button"
      v-if="orderDetail.status == 2 || orderDetail.status == 3"
    >
      <view
        class="button"
        style="margin-right: 26rpx"
        v-if="from == 'order'"
        @click="isBackBag"
      >
        退回背包
      </view>
      <view class="button" @click="goAsk"> 联系客服 </view>
    </view>
    <view class="bottom-button" v-if="orderDetail.status == 4">
      <!-- <view class="button" style="margin-right: 26rpx"> 查看物流 </view> -->
      <view class="button" @click="checkOwn"> 确认收货 </view>
    </view>
    <!-- <view class="bottom-button" v-if="orderDetail.status == 5">
			<view class="button"> 删除订单 </view>
		</view> -->

    <!-- 退回背包出层 -->
    <uni-popup ref="backpopup" type="center">
      <view class="backpopup-content">
        <view class="backpopup-title"> 提示 </view>
        <view class="backpopup-content-tow"> 是否退回背包？</view>
        <view class="backpopup-button">
          <view class="" @click="backpopup.close('center')"> 取消 </view>
          <view class="" @click="backBag"> 确定退回 </view>
        </view>
      </view>
    </uni-popup>
    <!-- 物流弹出层 -->
    <uni-popup ref="deliverypopup" type="center">
      <view class="deliverypopup-content">
        <view class="deliverypopup-content-cont">
          <view class="top">
            <image
              :src="deliveryGoods.img"
              v-if="from == 'mall'"
              mode=""
              style="
                width: 168rpx;
                height: 168rpx;
                margin-right: 16rpx;
                box-sizing: border-box;
                border-radius: 12rpx;
              "
            ></image>
            <image
              :src="deliveryGoods.goods_info.img"
              v-if="from == 'order'"
              mode=""
              style="
                width: 168rpx;
                height: 168rpx;
                margin-right: 16rpx;
                box-sizing: border-box;
                border-radius: 12rpx;
              "
            ></image>
            <view class="details">
              <view class="details-info">
                <view class="" style="color: #9b9b9d"> 物流状态： </view>
                <view class="" v-if="deliceryData.state == 0"> 在途 </view>
                <view class="" v-if="deliceryData.state == 1"> 揽收 </view>
                <view class="" v-if="deliceryData.state == 2"> 疑难 </view>
                <view class="" v-if="deliceryData.state == 3"> 签收 </view>
                <view class="" v-if="deliceryData.state == 4"> 退签 </view>
                <view class="" v-if="deliceryData.state == 5"> 派件 </view>
                <view class="" v-if="deliceryData.state == 8"> 清关 </view>
                <view class="" v-if="deliceryData.state == 14"> 拒签 </view>
              </view>
              <view class="details-info">
                <view class="" style="color: #9b9b9d"> 物流公司： </view>
                <view class="" style="color: #3d3d3d">
                  {{ deliveryGoods.express }}
                </view>
              </view>
              <view class="details-info">
                <view class="" style="color: #9b9b9d"> 物流单号： </view>
                <view class="" style="color: #3d3d3d">
                  {{ deliceryData.nu }}
                </view>
              </view>
            </view>
          </view>
          <view class="steps">
            <scroll-view
              scroll-y="true"
              class="scroll-Y"
              style="height: 36vh"
              scroll-top="1000000"
            >
              <uni-steps
                :options="deliceryData.data"
                active-color="#9B9B9D"
                :active="deliceryData.data.length - 1"
                direction="column"
              />
            </scroll-view>
          </view>
        </view>
        <view class="delivery-close" @click="deliverypopup.close('center')">
        </view>
      </view>
    </uni-popup>
  </view>
</template>

<style lang="scss" scoped>
  .details-content {
    position: relative;
    background-color: #f4f4f4;
    // height: 100vh;
  }
  .state-bg {
    // background-color: #7863ff;
    background: linear-gradient(180deg, #ffe60f, #f4f4f4);
    height: 260rpx;
    width: 100vw;
    color: #3d3d3d;
  }
  .status {
    font-size: 56rpx;
    padding-left: 46rpx;
    padding-top: 30rpx;
    font-weight: bold;
    color: #3d3d3d;
  }
  .position {
    position: relative;
    z-index: 1;
    left: 20rpx;
    bottom: 106rpx;
  }
  .add-tag {
    width: 710rpx;
    height: 150rpx;
    background-color: rgba(255, 255, 255, 0.5);
    border-radius: 10rpx;
  }
  .Information {
    display: flex;
    flex-direction: inherit;
    margin-left: 24rpx;
    padding-top: 26rpx;
  }

  .address-icon {
    width: 32rpx;
    height: 35rpx;
  }
  .name,
  .phone {
    font-size: 30rpx;
    color: #3d3d3d;
    font-weight: bold;
    margin-left: 15rpx;
  }
  .address {
    font-size: 28rpx;
    font-weight: 500;
    color: #898989;
    margin-left: 68rpx;
    padding-top: 22rpx;
  }
  .detail-list {
    width: 710rpx;
    background-color: #fff;
    // height: 626rpx;
    border-radius: 10rpx;
    margin-top: 30rpx;
    padding-top: 32rpx;
    padding-bottom: 30rpx;
  }
  .details-goods {
    position: relative;
    display: flex;
    // margin-top: 30rpx;
    align-items: flex-end;
    padding-left: 30rpx;
    margin-bottom: 32rpx;
  }
  .goods-img {
    width: 128rpx;
    height: 128rpx;
    border-radius: 8rpx;
    flex-shrink: 0;
    // padding-left: 32rpx;
    // margin-top: 32rpx;
  }
  .checkFilter {
    position: absolute;
    bottom: 0;
    left: 30rpx;
    width: 128rpx;
    height: 28rpx;
    border-radius: 0 0 8rpx 8rpx;
    background-color: $all-color;
    font-size: 16rpx;
    text-align: center;
    line-height: 28rpx;
    color: #3d3d3d;
  }
  .goods-name {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    height: 128rpx;
    padding-left: 20rpx;
    // padding-top: 32rpx;
    box-sizing: border-box;
    font-size: 26rpx;
    color: #3d3d3d;
    font-weight: 500;
  }
  .num {
    font-size: 24rpx;
    // width: 62rpx;
    padding-right: 10rpx;
  }
  .goods-tit {
    display: -webkit-box;
    -webkit-line-clamp: 2; /* 限制为两行 */
    -webkit-box-orient: vertical;
    overflow: hidden; /* 隐藏超出部分 */
    text-overflow: ellipsis; /* 超出部分用省略号表示 */
    white-space: normal; /* 允许换行 */
    // height: 120rpx;
    width: 464rpx;
  }
  .goods-price {
    vertical-align: bottom;
    font-size: 22rpx;
    font-weight: 700;
    padding-top: 28rpx;
  }
  .order {
    display: flex;
    color: #3d3d3d;
    align-items: center;
    justify-content: space-between;
    text-align: justify;
    margin: 30rpx 30rpx auto;
  }
  .real-money {
    display: flex;
    color: #3d3d3d;
    align-items: center;
    padding-right: 20rpx;
    border-top: 2rpx solid #f5f5f5;
    margin-top: 20rpx;
    padding-top: 20rpx;
    flex-direction: row-reverse;
  }
  .tit {
    font-size: 24rpx;
    color: #898989;
    // width: 96rpx;
  }
  .money {
    font-size: 28rpx;
    color: #3d3d3d;
    font-weight: 700;
  }
  .order-tit {
    font-size: 28rpx;
    font-weight: 500;
    // width: 440rpx;
  }
  .order-money {
    font-size: 24rpx;
    font-weight: 500;
    text-align: right;
  }

  .bottom-button {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    position: fixed;
    bottom: 0;
    left: 0;
    z-index: 1;
    height: 156rpx;
    width: 100%;
    padding: 26rpx;
    box-sizing: border-box;
    background-color: #fff;
    .button {
      width: 184rpx;
      height: 62rpx;
      border-radius: 31rpx;
      border: 4rpx solid #9b9b9d;
      box-sizing: border-box;
      font-size: 28rpx;
      line-height: 56rpx;
      text-align: center;
      color: #9b9b9d;
      &:last-child {
        border: none;
        background-color: $all-color;
        color: #3d3d3d;
        line-height: 62rpx;
      }
    }
  }
  .deliverypopup-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    .deliverypopup-content-cont {
      width: 630rpx;
      height: 758rpx;
      margin-bottom: 28rpx;
      padding: 32rpx 16rpx;
      box-sizing: border-box;
      border-radius: 16rpx;
      background-color: #fff;
      .top {
        display: flex;
        align-items: center;
        .details {
          display: flex;
          flex-direction: column;
          justify-content: space-between;
          height: 168rpx;
          .details-info {
            display: flex;
            align-items: center;
            font-size: 26rpx;
            color: $all-color;
          }
        }
      }
    }
    .delivery-close {
      width: 70rpx;
      height: 70rpx;
      background: url('https://ojqn.wm2177.com/wechat_imgs/sign-close.png')
        no-repeat;
      background-size: contain;
    }
  }
  .backpopup-content {
    width: 600rpx;
    height: 356rpx;
    padding: 0 30rpx;
    box-sizing: border-box;
    border-radius: 36rpx;
    background-color: #fff;
    .backpopup-title {
      height: 114rpx;
      border-bottom: 1px solid #d8d8d8;
      text-align: center;
      font-size: 40rpx;
      line-height: 114rpx;
    }
    .backpopup-content-tow {
      height: 116rpx;
      line-height: 116rpx;
      text-align: center;
      font-size: 28rpx;
      color: #9b9b9d;
    }
    .backpopup-button {
      display: flex;
      align-items: center;
      justify-content: space-between;
      view {
        width: 234rpx;
        height: 80rpx;
        background-color: $all-color;
        border-radius: 40rpx;
        text-align: center;
        font-size: 26rpx;
        line-height: 80rpx;
        color: #3d3d3d;
        font-weight: 600;
        &:first-child {
          border: 2rpx solid #9b9b9d;
          background-color: #fff;
          color: #9b9b9d;
        }
      }
    }
  }
  ::v-deep .uni-steps__column-title {
    margin-bottom: 10rpx;
    font-size: 26rpx !important;
  }
  ::v-deep .uni-steps__column-text {
    &:first-child {
      .uni-steps__column-title {
        color: black !important;
      }
    }
  }
  ::v-deep .uni-steps__column-desc {
    // color: #3d3d3d !important;
  }
</style>
